<style>
    :root {
        --primary: #4f46e5;
        --secondary: #64748b;
        --light-bg: #f8fafc;
        --dark-bg: #0f172a;
        --success: #10b981;
        --danger: #ef4444;
        --warning: #f59e0b;
        --info: #0ea5e9;
        --purple: #8b5cf6;
        --pink: #ec4899;
        --transition: all 0.3s ease;
    }

    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background-color: var(--light-bg);
        color: #1e293b;
        padding: 4rem 0;
    }

    .section-title {
        text-align: center;
        margin-bottom: 3rem;
        position: relative;
        padding-bottom: 1rem;
    }

    .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background-color: var(--primary);
        border-radius: 2px;
    }

    .logo-category {
        margin-bottom: 4rem;
    }

    .category-title {
        margin-bottom: 1.5rem;
        padding-left: 15px;
        border-left: 4px solid var(--primary);
    }

    .logo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 2rem;
    }

    /*** 基础样式 ***/
    .logo-card {
        background-color: white;
        border-radius: 12px;
        padding: 2rem;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: var(--transition);
    }

    .logo-card:hover {
        transform: translateY(-8px) scale(1.03) rotate(0deg);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
    }


    .logo-card .logo-container {
        width: 120px;
        height: 120px;
        margin: 0 auto 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
    }

    /* 不同风格的logo背景 */
    .logo-card .bg-gradient-1 {
        background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
    }

    .logo-card .bg-gradient-2 {
        background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    }

    .logo-card .bg-gradient-3 {
        background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    }

    .logo-card .bg-gradient-4 {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    .logo-card .bg-gradient-5 {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    .logo-card .bg-solid-1 {
        background-color: var(--primary);
    }

    .logo-card .bg-solid-2 {
        background-color: var(--purple);
    }

    .logo-card .bg-solid-3 {
        background-color: var(--pink);
    }

    .logo-card .bg-solid-4 {
        background-color: var(--info);
    }

    .logo-card .bg-solid-5 {
        background-color: var(--success);
    }

    .logo-card .bg-outline-1 {
        background-color: white;
        border: 3px solid var(--primary);
    }

    .logo-card .bg-outline-2 {
        background-color: white;
        border: 3px solid var(--purple);
    }

    .logo-card .bg-outline-3 {
        background-color: white;
        border: 3px solid var(--pink);
    }

    .logo-card .logo-icon {
        color: white;
        font-size: 4rem;
        transition: var(--transition);
    }

    .logo-card .bg-outline-1 .logo-icon,
    .logo-card .bg-outline-2 .logo-icon,
    .logo-card .bg-outline-3 .logo-icon {
        color: inherit;
    }

    .logo-card .bg-outline-1 {
        color: var(--primary);
    }

    .logo-card .bg-outline-2 {
        color: var(--purple);
    }

    .logo-card .bg-outline-3 {
        color: var(--pink);
    }

    .logo-card .logo-name {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .logo-card .logo-style {
        font-size: 0.9rem;
        color: var(--secondary);
        margin-bottom: 0;
    }

    /* 特殊形状的logo */
    .logo-card .logo-circle {
        border-radius: 50%;
    }

    .logo-card .logo-squircle {
        border-radius: 24px;
    }

    .logo-card .logo-hexagon {
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .logo-card .logo-container {
            width: 100px;
            height: 100px;
        }

        .logo-card .logo-icon {
            font-size: 3rem;
        }

    }
</style>

<div class="container">
    <h1 class="section-title">社交网站Logo设计展示</h1>

    <!-- 渐变背景风格 -->
    <div class="logo-category">
        <h2 class="category-title">渐变背景风格</h2>
        <div class="logo-grid">
            <div class="logo-card">
                <div class="logo-container bg-gradient-1">
                    <i class="fas fa-connectdevelop logo-icon"></i>
                </div>
                <h3 class="logo-name">Connect</h3>
                <p class="logo-style">紫色渐变 + 连接图标</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-gradient-2">
                    <i class="fas fa-heart logo-icon"></i>
                </div>
                <h3 class="logo-name">Heartbeat</h3>
                <p class="logo-style">粉色渐变 + 心形图标</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-gradient-3">
                    <i class="fas fa-comments logo-icon"></i>
                </div>
                <h3 class="logo-name">ChatHub</h3>
                <p class="logo-style">蓝色渐变 + 对话图标</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-gradient-4">
                    <i class="fas fa-users logo-icon"></i>
                </div>
                <h3 class="logo-name">SocialCircle</h3>
                <p class="logo-style">绿色渐变 + 人群图标</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-gradient-5">
                    <i class="fas fa-star logo-icon"></i>
                </div>
                <h3 class="logo-name">StarLink</h3>
                <p class="logo-style">橙色渐变 + 星星图标</p>
            </div>
        </div>
    </div>

    <!-- 纯色背景风格 -->
    <div class="logo-category">
        <h2 class="category-title">纯色背景风格</h2>
        <div class="logo-grid">
            <div class="logo-card">
                <div class="logo-container bg-solid-1 logo-circle">
                    <i class="fas fa-share-alt logo-icon"></i>
                </div>
                <h3 class="logo-name">ShareIt</h3>
                <p class="logo-style">圆形 + 分享图标</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-solid-2 logo-squircle">
                    <i class="fas fa-user-friends logo-icon"></i>
                </div>
                <h3 class="logo-name">BuddyNet</h3>
                <p class="logo-style">圆角方形 + 好友图标</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-solid-3">
                    <i class="fas fa-paper-plane logo-icon"></i>
                </div>
                <h3 class="logo-name">FlyChat</h3>
                <p class="logo-style">矩形 + 纸飞机图标</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-solid-4 logo-hexagon">
                    <i class="fas fa-globe logo-icon"></i>
                </div>
                <h3 class="logo-name">GlobalTalk</h3>
                <p class="logo-style">六边形 + 地球图标</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-solid-5 logo-circle">
                    <i class="fas fa-handshake logo-icon"></i>
                </div>
                <h3 class="logo-name">MeetUp</h3>
                <p class="logo-style">圆形 + 握手图标</p>
            </div>
        </div>
    </div>

    <!-- 线条轮廓风格 -->
    <div class="logo-category">
        <h2 class="category-title">线条轮廓风格</h2>
        <div class="logo-grid">
            <div class="logo-card">
                <div class="logo-container bg-outline-1 logo-circle">
                    <i class="fas fa-comment-dots logo-icon"></i>
                </div>
                <h3 class="logo-name">TalkMore</h3>
                <p class="logo-style">圆形轮廓 + 对话图标</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-outline-2">
                    <i class="fas fa-link logo-icon"></i>
                </div>
                <h3 class="logo-name">LinkUp</h3>
                <p class="logo-style">矩形轮廓 + 链接图标</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-outline-3 logo-squircle">
                    <i class="fas fa-smile logo-icon"></i>
                </div>
                <h3 class="logo-name">HappyMe</h3>
                <p class="logo-style">圆角方形轮廓 + 笑脸图标</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-outline-1 logo-hexagon">
                    <i class="fas fa-map-marker-alt logo-icon"></i>
                </div>
                <h3 class="logo-name">LocalChat</h3>
                <p class="logo-style">六边形轮廓 + 定位图标</p>
            </div>
        </div>
    </div>

    <!-- 文字标志风格 -->
    <div class="logo-category">
        <h2 class="category-title">文字标志风格</h2>
        <div class="logo-grid">
            <div class="logo-card">
                <div class="logo-container bg-solid-1 d-flex flex-column">
                    <span class="logo-icon" style="font-size: 2.5rem; font-weight: bold;">S</span>
                </div>
                <h3 class="logo-name">Social</h3>
                <p class="logo-style">首字母标志 + 纯色背景</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-gradient-3 d-flex align-items-center justify-content-center">
                    <span class="logo-icon"
                          style="font-size: 2rem; font-weight: bold; letter-spacing: -2px;">Nexus</span>
                </div>
                <h3 class="logo-name">Nexus</h3>
                <p class="logo-style">全文字标志 + 渐变背景</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-outline-2 d-flex align-items-center justify-content-center">
                    <span class="logo-icon" style="font-size: 2.2rem; font-weight: bold;">C</span>
                </div>
                <h3 class="logo-name">Circle</h3>
                <p class="logo-style">首字母标志 + 轮廓背景</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-gradient-2 d-flex align-items-center justify-content-center">
                    <span class="logo-icon"
                          style="font-size: 1.8rem; font-weight: bold; letter-spacing: -1px;">LinkUp</span>
                </div>
                <h3 class="logo-name">LinkUp</h3>
                <p class="logo-style">组合文字标志 + 渐变背景</p>
            </div>
        </div>
    </div>
</div>

    